document.addEventListener('DOMContentLoaded', function() {
    // 仅获取courses区域内需要动画的元素
    const coursesSection = document.getElementById('courses');
    const fadeElements = coursesSection.querySelectorAll('.fade-in, .fade-in-left, .fade-in-right');
    
    // 动态添加动画时长样式（延长至1.2秒）
    const style = document.createElement('style');
    style.textContent = `
        .fade-in, .fade-in-left, .fade-in-right {
            opacity: 0;
            transition: opacity 2.4s ease, transform 1.2s ease !important;
        }
        .fade-in-left {
            transform: translateX(-30px);
        }
        .fade-in-right {
            transform: translateX(30px);
        }
        .active {
            opacity: 1 !important;
            transform: translateX(0) !important;
        }
    `;
    document.head.appendChild(style);
    
    // 创建Intersection Observer检测元素是否进入视口
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('active');
              
            }
        });
    }, {
        threshold: 0.1, // 元素10%进入视口时触发
        rootMargin: '0px 0px -50px 0px' // 底部偏移，提前一点触发
    });
    
    // 仅观察courses区域内的动画元素
    fadeElements.forEach(element => {
        observer.observe(element);
    });
    
    // 初始检查（防止元素已在视口内未触发）
    function checkInitialVisibility() {
        fadeElements.forEach(element => {
            const rect = element.getBoundingClientRect();
            const isVisible = (
                rect.top < window.innerHeight - 50 &&
                rect.bottom > 0
            );
            if (isVisible) {
                element.classList.add('active');
                observer.unobserve(element);
            }
        });
    }
    
    checkInitialVisibility();
});